<template>
    <van-nav-bar :fixed="true" title="购物车" left-text="返回" left-arrow @click-left="bindBack" />
    <div style="margin-bottom: 70px;margin-top: 46px;">
        <van-swipe-cell v-for="item in cartStore.list" :key="item.id">
            <van-checkbox class="CartCheckbox" :checked="item.state" @click="cartStore.singleCheck(item.id)">
                <van-card :price="(item.price*item.num).toFixed(2)" :title="item.name" >
                    <template #thumb>
                        <div class="g-thumb">
                            <van-image :src="item.url" width="70%"></van-image>
                        </div>
                    </template>
                    <template #footer>
                        <div class="g-footer">
                            <div class="g-stepper" @click.stop><van-stepper v-model="item.num" integer /></div>
                            <van-button square type="default" size="small" @click="bindDelete(item.id)"><van-icon
                                    name="delete" /></van-button>
                        </div>
                    </template>
                </van-card>
            </van-checkbox>
        </van-swipe-cell>
        <van-empty description="购物车空空如也" v-if="cartStore.list.length == 0"
            image="https://twsycz.com/catalog/view/theme/default/image/no_items.png">
        </van-empty>
    </div>

    <van-submit-bar :price="cartStore.totalPrice" button-text="提交订单" @submit="bindTest"
        v-for="item in cartStore.list" :key="item.id">
        <van-checkbox :checked="cartStore.stateAll" @click="cartStore.checkAll">全选</van-checkbox>
        <van-button square type="default" size="small" @click="bindDeleteAll"><van-icon name="delete" /></van-button>
    </van-submit-bar>
    <!-- <button @click="bindTest">让我看一看</button> -->
</template>
<script setup lang="ts">
import { useCart } from '@/hooks/cart'
import { useOrderStore } from '@/stores/order'
import { useRouter } from 'vue-router'
const { cartStore, bindDelete, bindBack, bindDeleteAll,bindOrder } = useCart()
const orderStore = useOrderStore()
const router = useRouter()
const bindTest =()=>{
    router.replace({path:'/order'})
    let  olderlist =    cartStore.list.map((item)=>{
        if(item.state== true){
            return {olderState:item.state,num:item.num,name:item.name,id:item.id,url:item.url,price:item.price}
        }
    })
    orderStore.test(olderlist)
}
</script>

<style lang="scss" scoped>
.g-thumb {
    width: 125%;
}

.g-footer {
    display: flex;
    justify-content: flex-end;
}

.van-card {
    background-color: #ffffff;
    border-bottom: 1px solid #cccccc;
    margin-right: 25px;
}

.g-stepper {
    margin-top: 5px;
}

.van-button {
    font-size: 20px;
    border: 1px solid #ffffff;
}

.van-image {
    margin-top: 25px;
}
.CartCheckbox{
    padding-left: 15px;
} 
</style>
